<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas粒子效果文字动画特效DEMO演示</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
    <div style="text-align:center;clear:both;position:absolute;top:0;left:260px">
        <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
        <script src="/follow.js" type="text/javascript"></script>
    </div>
    <canvas class="canvas"></canvas>
    <div class="help">?</div>
    <div class="ui">
        <input class="ui-input" type="text" />
        <span class="ui-return">↵</span>
    </div>
    <div class="overlay">
        <div class="tabs">
            <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>
            <div class="tabs-panels">
                <ul class="tabs-panel commands">
                    <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span>
                        <span
                            class="commands-item-action">Demo</span>
                    </li>
                    <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span>
                        <span
                            class="commands-item-action">Demo</span>
                    </li>
                    <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span>
                        <span
                            class="commands-item-action">Demo</span>
                    </li>
                    <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span>
                        <span
                            class="commands-item-action">Demo</span>
                    </li>
                    <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span>
                        <span
                            class="commands-item-action">Demo</span>
                    </li>
                    <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|
                        <span
                            class="commands-item-mode">command2</span>
                            </span><span class="commands-item-action">Demo</span></li>
                </ul>
                <div class="tabs-panel ui-details">
                    <div class="ui-details-content">
                        <h1>Shape Shifter</h1>
                        <p>
                            An experiment by Kenneth Cachia.<br/> Font Awesome</a> is being used to render all #icons.
                        </p>
                        <br/>
                        <p>Visit Shape Shifter to use icons.</p>
                    </div>
                </div>
                <div class="tabs-panel ui-share">
                    <div class="ui-share-content">
                        <h1>Sharing</h1>
                        <p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>

</html>